import React from 'react';
import '../styles/appleItem.scss';
import applePic from '../images/apple.png'
import { inject, observer } from 'mobx-react';

@inject('appleStore')
@observer
class AppleItem extends React.Component {
    render() {
        const {apple, eatApple} = this.props
        return (
            <div className="appleItem">
                <div className="apple"><img src={applePic} alt=""/></div>
                <div className="info">
                    <div className="name">红苹果{apple.id}号</div>
                    <div className="weight">{apple.weight}</div>
                </div>
                <div className="btn-div">
                    <button onClick={()=>eatApple(apple.id)}> 吃掉 </button>
                </div>
            </div>
        );
    }
}


export default AppleItem;